<template>
	<view class="play_song" ref="play_song">
		<i class="iconfont" @click="pre">&#xe63c;</i>
		<i class="iconfont center" @click="pause" v-if="isPlay">&#xe76a;</i>
		<i class="iconfont center" @click="pause" v-else>&#xe60f;</i>
		<i class="iconfont" @click="next">&#xe63e;</i>
	</view>
</template>
 
<script>
	export default {
		name: '',
		props: {
			songUrl: {
				type: String,
				default: ""
			}
		},
		data(){
			return {
				isPlay: true,
				innerAudioContext: null,
				audioCurrentTime: 0
			}
		},
		methods:{
			pre() {
				this.$emit("pre")
			},
			pause() {
				if(this.isPlay == true) {
					this.innerAudioContext.pause()
				} else {
					this.innerAudioContext.play()
				}
				this.isPlay = !this.isPlay
				this.$emit("pause", this.isPlay)
			},
			next() {
				this.$emit("next")
			}
		},
		watch:{
			songUrl() {
				//如果已存在则销毁
				if(this.innerAudioContext) this.innerAudioContext.destroy()
				//创建音频组件控制
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = this.songUrl;
				
				this.innerAudioContext.onError(res => { 
				  console.log(res)
				});
				//记录实时播放时间
				this.innerAudioContext.onTimeUpdate(() => {
					this.audioCurrentTime = this.innerAudioContext.currentTime
					this.$emit("audioTime", this.audioCurrentTime)
				})
			}
		},
		destroyed() {
			this.innerAudioContext.destroy()
		}
	}
</script>
 
<style lang="less" scoped>
	.play_song {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
		i {
			font-size: 50upx;
		}
		.center {
			margin: 0 100upx 0;
		}
	}
</style>
